<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="common/header.jsp"%>
<div class="clearfix"></div>
<div class="row">

	<div class="col-md-12">
		<div class="x_panel">
			<div class="x_title">
				<h2>
					APP 审核列表 <i class="fa fa-user"></i><small>${userSession.userName}
						- 您可以通过搜索或者其他的筛选项对APP的信息进行审核操作。^_^</small>
				</h2>
				<div class="clearfix"></div>
			</div>
			<div class="x_content">
				<form method="post" action="list">
					<input type="hidden" name="pageNo" id="form" value="1" />
			    <ul>
					<li>
						<div class="form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12">软件名称</label>
							<div class="col-md-6 col-sm-6 col-xs-12">
								<input name="softwareName" type="text" class="form-control col-md-7 col-xs-12" value="${softwareName }">
							</div>
						</div>
					</li>
					
					<li>
						<div class="form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12">所属平台</label>
							<div class="col-md-6 col-sm-6 col-xs-12">
								<select name="flatformId" class="form-control" id="flatformId">
									<option value="0">--请选择--</option>
        						</select>
							</div>
						</div>
					</li>
					<li>
						<div class="form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12">一级分类</label>
							<div class="col-md-6 col-sm-6 col-xs-12">
								<select id="categoryLevel1" name="categoryLevel1" class="form-control">
									<option value="0">--请选择--</option>
        						</select>
							</div>
						</div>
					</li>
					<li>
						<div class="form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12">二级分类</label>
							<div class="col-md-6 col-sm-6 col-xs-12">
        						<select name="categoryLevel2" id="categoryLevel2" class="form-control">
									<option value="0">--请选择--</option>
        						</select>
							</div>
						</div>
					</li>
					<li>
						<div class="form-group">
							<label class="control-label col-md-3 col-sm-3 col-xs-12">三级分类</label>
							<div class="col-md-6 col-sm-6 col-xs-12">
        						<select name="categoryLevel3" id="categoryLevel3" class="form-control">
									<option value="0">--请选择--</option>
        						</select>
							</div>
						</div>
					</li>
					<li><button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询 </button></li>
				</ul>
			</form>
		</div>
	</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
	<div class="x_panel">
		<div class="x_content">
			<p class="text-muted font-13 m-b-30"></p>
			<div id="datatable-responsive_wrapper"
				class="dataTables_wrapper form-inline dt-bootstrap no-footer">
				<div class="row">
					<div class="col-sm-12">
						<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
							cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
							<thead>
								<tr role="row">
									<th class="sorting_asc" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 70px;" aria-label="First name: activate to sort column descending"
										aria-sort="ascending">软件名称</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 10px;"
										aria-label="Last name: activate to sort column ascending">
										APK名称</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 90px;"
										aria-label="Last name: activate to sort column ascending">
										软件大小(单位:M)</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 50px;"
										aria-label="Last name: activate to sort column ascending">
										所属平台</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 170px;"
										aria-label="Last name: activate to sort column ascending">
										所属分类(一级分类、二级分类、三级分类)</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 30px;"
										aria-label="Last name: activate to sort column ascending">
										状态</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 30px;"
										aria-label="Last name: activate to sort column ascending">
										下载次数</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 64px;"
										aria-label="Last name: activate to sort column ascending">
										最新版本号</th>
									<th class="sorting" tabindex="0"
										aria-controls="datatable-responsive" rowspan="1" colspan="1"
										style="width: 30px;"
										aria-label="Last name: activate to sort column ascending">
										操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${appInfoList.list}" var="appInfo">
									<tr role="row" class="odd">
										<td tabindex="0" class="sorting_1">${appInfo.softwareName}</td>
										<td>${appInfo.APKName }</td>
										<td>${appInfo.softwareSize }</td>
										<td>${appInfo.flatformName }</td>
										<td>${appInfo.categoryLevel1Name } -> ${appInfo.categoryLevel2Name } -> ${appInfo.categoryLevel3Name }</td>
										<td>${appInfo.statusName }</td>
										<td>${appInfo.downloads }</td>
										<td>${appInfo.versionName }</td>
										<td>
											<button type="button" class="btn btn-default checkApp" name="checkApp"
													appinfoid="${appInfo.id }" versionid="${appInfo.versionId}" status="${appInfo.status }"
													statusname="${appInfo.statusName }"
													data-toggle="tooltip" data-placement="top" title="" data-original-title="查看并审核APP">审核</button>
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-5">
						<div class="dataTables_info" id="datatable-responsive_info"
							role="status" aria-live="polite">共${appInfoList.total }条记录
							${appInfoList.pageNum }/${appInfoList.pages }页</div>
					</div>
					<div class="col-sm-7">
						<div class="dataTables_paginate paging_simple_numbers"
							id="datatable-responsive_paginate">
							<ul class="pagination">
								<c:if test="${appInfoList.pageNum > 1}">
									<li class="paginate_button previous"><a
										href="javascript:page_nav(document.forms[0],1);"
										aria-controls="datatable-responsive" data-dt-idx="0"
										tabindex="0">首页</a>
									</li>
									<li class="paginate_button "><a
										href="javascript:page_nav(document.forms[0],${appInfoList.pageNum-1});"
										aria-controls="datatable-responsive" data-dt-idx="1"
										tabindex="0">上一页</a>
									</li>
								</c:if>
								<c:if test="${appInfoList.pageNum < appInfoList.pages }">
									<li class="paginate_button "><a
										href="javascript:page_nav(document.forms[0],${appInfoList.pageNum+1 });"
										aria-controls="datatable-responsive" data-dt-idx="1"
										tabindex="0">下一页</a>
									</li>
									<li class="paginate_button next"><a
										href="javascript:page_nav(document.forms[0],${appInfoList.pages });"
										aria-controls="datatable-responsive" data-dt-idx="7"
										tabindex="0">最后一页</a>
									</li>
								</c:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>
</div>
<%@include file="common/footer.jsp"%>
<script>

	$(".checkApp").click(function (){

		var appId = $(this).attr("appinfoid")
		var versionId = $(this).attr("versionid")

		if (null == versionId || versionId == undefined || versionId == ""){
			alert("当前应用没有最新版本,无法进行审核!!");
			return ;
		}

		location.href = "/backend/appinfo/selectAppinfoAndVersion/"+appId;

	})

	function page_nav(form,pageNo){
		form.pageNo.value = pageNo;
		form.submit();
	}

	$(function(){

		//加载一级分类信息
		loadCategoryLeve1 (null,"categoryLevel1")


		//当用户选择对应的一级分类信息后，会根据用户的选择去加载对应的二级分类信息
		$("#categoryLevel1").change(loadCategoryLeve2)


		//当用户选择对应的二级分类信息后，会根据用户的选择去加载对应的三级分类信息
		$("#categoryLevel2").change(loadCategoryLeve3)

		//发送ajax请求，向后台请求所属平台的数据
		loadDataDictionary ("所属平台","flatformId",${appInfoCondition.flatformId == null ? 0:appInfoCondition.flatformId})

	})

	function loadCategoryLeve1(){
		//1.加载一级分类
		$.ajax({
			url:"/category/list",
			data:{parentId:null},
			success:function (data) {
				//1.清空二级和三级分类信息
				$("#categoryLevel2>option:gt(0)").remove();
				$("#categoryLevel3>option:gt(0)").remove();
				//2.把从后台返回的数据拼接到字符串中去
				var options = "";

				//遍历数组
				for(var i =0 ; i < data.length; i++ ){

					options += "<option value='"+data[i].id+"'>"+data[i].categoryName+"</option>";
				}


				//3.把拼接的字符串添加到一级分类的下拉列表框中
				$("#categoryLevel1").append(options);
				$("#categoryLevel1").val(${appInfoCondition.categoryLevel1 == null ? 0 : appInfoCondition.categoryLevel1});
				loadCategoryLeve2(); //从新加载二级分类的值
			}
		})
	}


	function loadCategoryLeve2() {
		var parentId = $("#categoryLevel1").val();
		//如果父级id的值不等于0，才发送异步请求，不然请求的数据有问题
		//1.清空二级和三级分类下拉框中的内容
		$("#categoryLevel2>option:gt(0)").remove();
		$("#categoryLevel3>option:gt(0)").remove();

		if(parentId != 0){
			//发送ajax请求
			$.ajax({
				url:"/category/list",
				data:{parentId:parentId},
				success:function (data) {

					var options = "";
					//遍历数据
					for(var i = 0 ; i < data.length; i++ ){
						options += "<option value='"+data[i].id+"'>"+data[i].categoryName+"</option>";
					}

					//加载数据在二级分类下拉框中
					$("#categoryLevel2").append(options);
					//回显数据
					$("#categoryLevel2").val(${appInfoCondition.categoryLevel2 == null ? 0 : appInfoCondition.categoryLevel2});
					//加载三级分类的数据
					loadCategoryLeve3();
				}
			});
		}
	}


	function loadCategoryLeve3() {
		var parentId = $("#categoryLevel2").val();

		//清空三级分类下拉框
		$("#categoryLevel3>option:gt(0)").remove();

		if(parentId != 0){
			$.ajax({
				url:"/category/list",
				data:{parentId:parentId},
				success:function (data) {
					var options="";

					//遍历数据
					for(var i = 0; i < data.length ; i++){
						options += "<option value='"+data[i].id+"'>"+data[i].categoryName+"</option>";
					}
					//把数据写入到三级下拉框中
					$("#categoryLevel3").append(options);
					//回显数据
					$("#categoryLevel3").val(${appInfoCondition.categoryLevel3 == null ? 0 : appInfoCondition.categoryLevel3});

				}
			});
		}

	}


	/**
	 * 封装App状态和所属平台的加载方法
	 * @param typeName	发送给后台的请求参数值
	 * @param thisId 标签id值
	 */
	function loadDataDictionary (typeName,thisId,value) {

		//发送ajax请求，向后台请求APP状态的数据
		$.ajax({
			url:"/dictionary/type", //请求路径
			data:{typeName:typeName}, //发送到后台的请求参数
			success:function (data) { //请求成功后，后台返回的数据 data
				//如果数据返回成功 就渲染页面

				//1.创建option标签
				var options = "";
				//2.遍历后台传递的数据
				for(var i = 0 ; i < data.length ; i++){
					//3.给option标签赋值
					options +="<option value='"+data[i].valueId+"'>"+data[i].valueName+"</option>";
				}

				//4.把创建的所有的option标签添加到对应的标签里面
				$("#"+thisId).append(options);

				//给APP状态和所属平台设置默认
				$("#"+thisId).val(value);


			}

		})

	}

</script>
